<template>
  <div>
    <Backnav backTitle="订单评价"></Backnav>
    <div class="section">
      <!-- 循环渲染体 -->
      <div v-for="item in orderInfo.product" :key="item.id">
        <div class="orderinfo">
          <div class="productImg"><img :src="item.thumb" alt="" /></div>
          <div class="info">
            <div>{{ item.title }}</div>
            <div>
              {{ orderInfo.specify }} <span>x{{ item.id }}</span>
            </div>
          </div>
        </div>

        <div class="ping">
          <span>商品评分:</span>
          <span><van-rate v-model="item.pinfen" /></span>
          <span v-if="item.pinfen == 0"></span>
          <span v-else>{{ item.pinfen }}星</span>
        </div>

        <div class="pingaText">
          <van-field
            :multiple="true"
            maxlength="200"
            v-model="item.message"
            rows="1"
            autosize
            type="textarea"
            show-word-limit
            placeholder="收到商品请留下您宝贵的评价，以便我们改进"
          />
          <van-uploader v-model="item.img" multiple :max-count="5" />
        </div>
      </div>

      <div class="submitss">
        <button type="button" @click="submitComments">提交评论</button>
      </div>
    </div>
  </div>
</template>

<script>
import Backnav from "../../components/nav/Backnav.vue";
export default {
  components: { Backnav },
  data() {
    return {
      // value: 0,
      orderInfo: {
        id: "1",
        storeName: "剥壳者商城",
        orderState: "卖家处理中",
        state: "6",
        num: "30",
        specify: "独立包装(1个装)",
        storeImg: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        orderNumber: new Date().getTime(),
        product: [
          {
            id: "1",
            price: "3.5",
            desc: "甜得很",
            pinfen: 0,
            message: "",
            img: [],
            checked: false,
            title: "黑美人西瓜",
            thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          },
          {
            id: "2",
            price: "3.5",
            desc: "甜得很",
            pinfen: 0,
            message: "",
            img: [],
            checked: true,
            title: "脆皮西瓜",
            thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          },
        ],
        allMoney: "10.5",
      },
    };
  },
  mounted() {},
  methods: {
    submitComments() {
      // alert("路由跳转到全部订单，待合并");
      this.orderInfo.product.forEach((item) => {
        console.log(item.pinfen, item.message);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.section {
  margin-top: 3.125rem;
  margin-bottom: 80px;
  font-size: 14px;
  .orderinfo {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 5px 10px;
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
    .info {
      margin-left: 10px;
      div:last-child {
        background-color: #f2f2f2;
        display: inline-block;
        padding: 3px 5px;
        margin-top: 8px;
        border-radius: 5px;
      }
      span {
        margin-left: 10px;
      }
    }
  }
  .ping {
    height: 40px;
    line-height: 40px;
    padding: 5px 10px;
    span {
      margin-right: 10px;
    }
  }
  .pingaText {
    margin: 5px 10px 35px 10px;
    height: auto;
    width: calc(100%-10px);
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    padding: 5px;
  }
  .productImg {
    width: 60px;
    height: 60px;
    img {
      width: 100%;
    }
  }
  .van-cell {
    padding: 5px;
    margin-bottom: 10px;
  }
}
</style>